<template>
    <div class="uploadModeList3d">
        <loading v-if="!itemMsg" loadingStyle="height:400px"></loading>
        <div v-else>
            <ul class="infoBoxChild clearfix">
                <li v-for="item in itemMsg.data.items[modeType]" :key="item.id">
                    <router-link :to="{path:toUrl,query:{modeId:item.id}}">
                    <div @click="tourl(item.status,item.id)">
                    <!-- <div class="vipIcon">
                        <img src="../../img/vipIcon.png" alt="">
                    </div> -->
                    <div class="infoImg">
                        <img :src="item.image" alt="">
                        <span class="checkStatus" :class="{'checkStatusError':item.status==2,'checkStatusSuccess':item.status==1}">
                            {{itemStatus(item.status)}}
                        </span>
                        <div class="clearfix infoTextBox">
                            <div class="infoText" v-if="!(item.status==2)">
                                <p class="vipText" :title="item.title">{{item.title}}</p>
                                <p class="infoItemId">上传日期:&nbsp<span>{{item.created_at}}</span></p>
                            </div>
                            <div v-else class="StatusError">
                                <p :title="item.note">{{cutString(item.note,80)}}</p>
                                <span class="delBtn" @click.stop="delItem($event,item.id)"></span>
                            </div>
                        </div>
                    </div>
                    </div>
                    </router-link>
                </li>
            </ul>
            <page :pageItem="pageitme" style="width: 100%;" @pageChange="getMsg"></page>
        </div>
        <div v-if="itemMsg&&itemMsg.data.items[modeType].length==0" class="nullContent">
            暂无内容
        </div>
    </div>
</template>
<script>
import loading from '../../../loading.vue'
import page from '../../../page.vue'
    export default{
        name : "modeList",
        props: ["toUrl","modeType","sort"],
        data(){
            return {
                msg: "模型列表",
                itemMsg:"",
                pageitme : "",
            }
        },
        components:{
            page,
            loading
        },
        methods: {
            tourl(status,id){
                 if(status=='1'){
                     this.$router.push(this.toUrl+'/'+id)
                 }
            },
            cutString(str, len) {
                //length属性读出来的汉字长度为1
                if(str.length*2 <= len) {
                    return str;
                }
                var strlen = 0;
                var s = "";
                for(var i = 0;i < str.length; i++) {
                    s = s + str.charAt(i);
                    if (str.charCodeAt(i) > 128) {
                        strlen = strlen + 2;
                        if(strlen >= len){
                            return s.substring(0,s.length-1) + "...";
                        }
                    } else {
                        strlen = strlen + 1;
                        if(strlen >= len){
                            return s.substring(0,s.length-2) + "...";
                        }
                    }
                }
                return s;
            },
            errorWarning() {
                var This = this;
                this.$message({
                        message: '删除失败',
                        type: 'error',
                        customClass : 'downLoadError',
                        duration : 2000,
                        showClose : true
                    });
            }, 
            successWarning() {
                this.$message({
                        message: '删除成功',
                        type: 'success',
                        customClass : 'downLoadError',
                        duration : 2000,
                        showClose : true
                    });
            }, 
            delItem(e,id){
                axios.get("modeldelete/"+id).then(response=>{
                    this.successWarning();
                    e.path[5].remove()
                }).catch(error=>{
                    this.errorWarning();
                })
            },
            getMsg(value){//翻页
                axios.get("/useruploads/"+this.modeType+"/getItems?page="+value)
                .then(response=>{
                    this.itemMsg = response.data;
                })
            },
            itemStatus(status){
                if(status=="0"){
                    return "审核中"
                }else if(status=="1"){
                    return "已通过"
                }else if(status=="2"){
                    return "未通过"
                }
            }
        },
        mounted () {
            axios.get("/useruploads/"+this.modeType+"/getItems")
            .then(response=>{
                this.itemMsg = response.data;
                this.pageitme = response.data;
            })
        }
    }
</script>
<style>
@import "../../../../css/global.css";
.downLoadError{
    margin-top: 20%;
    font-size: 50px;
}
.uploadModeList3d .infoBoxChild li{
    width: 220px!important;
    height: 164px!important;
    margin-right: 10px;
    padding: 0;
    cursor:pointer;
}
.uploadModeList3d .infoBoxChild li:hover{
    background: transparent;
    box-shadow:none;
}
.uploadModeList3d .vipText{
    color: #fff;
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uploadModeList3d .infoImg img{
    width: 220px;
    height: 164px!important;
}
.uploadModeList3d .infoImg{
    height: 164px;
}
.uploadModeList3d .infoTextBox{
    top: 120px;
}
.uploadModeList3d .infoBoxChild li:hover .infoTextBox{
    padding-top: 65px;
    top:0;
}
.checkStatus{
    position: absolute;
    top: 13px;
    right: 14px;
    width: 60px;
    font-size: 14px;
    line-height: 22px;
    color: #fff;
    background: #ea514b;
    border-radius: 2px;
    text-align: center;
}
.checkStatusError{
    background: #8b8b8b;
}
.checkStatusSuccess{
    background: #40bf02;
}
.nullContent{
    text-align: center;
    font-size: 25px;
    line-height: 40px;
    height: 400px;
}
.StatusError{
    position:relative;
    height: 164px;
}
.StatusError p{
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    padding: 0 20px;
    height: 63px;
    text-align: left;
    /* white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; */
}
.delBtn{
    position: absolute;
    width: 20px;
    height: 20px;
    right: 16px;
    bottom: 80px;
    background: url(./delete.png) no-repeat center;
}
</style>

